<template>
    <div class="container" style="display: flex;">
        <el-col :span="4">
            <div class="menu-container">
                <el-menu default-active="2" class="el-menu" background-color="#fff" text-color="black"
                    active-text-color="blue" active-background-color="#f0f9eb">

                    <el-menu-item v-for="item in talkinglist" :key="item.id"
                        @click="getMessage(item.userDetails.userId)">
                        {{ item.userDetails.acName }}
                        <el-button size="small" @click=clean(item.userDetails.userId) type="danger"
                            round>删除对话</el-button>
                    </el-menu-item>
                    <el-menu-item>


                    </el-menu-item>
                </el-menu>

            </div>
        </el-col>
        <el-col :span="20">
            <div class="chat-window">
                <div class="top">
                </div>
                <div class="botoom">
                    <div class="chat-content" ref="chatContent">
                        <div class="chat-wrapper">
                            <div class="chat-text">
                                <div v-for="item in messagelist" :key="item.messageInfo">
                                    <div v-if="userId != item.sendId" class="chat-friend">
                                        <div class="chat-text">
                                            {{ item.messageInfo }}
                                        </div>
                                    </div>
                                    <div v-else class="chat-me">
                                        <div class="chat-text">
                                            {{ item.messageInfo }}
                                        </div>

                                    </div>
                                </div>
                            </div>
                            <div class="chatInputs">

                                <input class="inputs" v-model="inputMSG" />
                                <div class="send boxinput" @click="sendText(inputMSG)">
                                    发送
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </el-col>



    </div>
</template>

<script>

import axios from "axios";
import { ref, onMounted } from 'vue';

export default {

    data() {
        return {
            list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 12, 13, 14, 15, 16, 17, 18],
            talkinglist: [],
            messagelist: ref([]),
            selectedChatId: null,
            acName: '',
            target_id: '',
            sendId: '',
            messageInfo: '',
            inputMSG: '',
            userId: localStorage.getItem('userId'),
            wo: localStorage.getItem('userId'),
            bieren: localStorage.getItem('userpageId')



        };
    },
    created() {
        axios({
            url: "/api/messageList/getList",
            method: 'post',
            headers: {
                "HOSHINO_T_KK": localStorage.getItem("userToken"),
            },
        })
            .then(response => {
                console.log(response);
                // this.pull_id = response.data.data.pullId;
                this.talkinglist = Array.isArray(response.data.data) ? response.data.data : [];
            })
            .catch(error => {
                console.error('Error ', error);
            })
    },


    methods: {
        clean(id) {
            axios({
                url: "/api/messageList/delTarget",
                method: 'post',
                headers: {
                    "HOSHINO_T_KK": localStorage.getItem("userToken"),
                },
                data: {
                    target_id: id

                }
            })
                .then(response => {
                    console.log(response.data);
                    console.log(response.data.data);
                    this.messagelist = response.data.data;
                    // this.sendId = response.data.data.sendId;
                })
                .catch(error => {
                    console.error('Error ', error);
                })

        },
        getMessage(id) {
            localStorage.setItem('pullId', id);
            axios({
                url: "/api/message/getUser",
                method: 'post',
                headers: {
                    "HOSHINO_T_KK": localStorage.getItem("userToken"),
                },
                data: {
                    pull_id: id
                }
            })
                .then(response => {
                    console.log(response.data);
                    console.log(response.data.data);
                    this.messagelist = response.data.data;
                    // this.sendId = response.data.data.sendId;
                })
                .catch(error => {
                    console.error('Error ', error);
                })
        },

        sendText(inputMsg) {
            this.inputMSG = '';
            axios({
                url: "/api/sse/send",
                method: 'post',
                headers: {
                    "HOSHINO_T_KK": localStorage.getItem("userToken"),
                },
                data: {
                    pull_id: localStorage.getItem("pullId"),
                    message: inputMsg
                }
            })
                .then(response => {
                    console.log(response.data);
                    console.log(response.data.data);
                    // this.sendId = response.data.data.sendId;

                    axios({
                        url: "/api/message/getUser",
                        method: 'post',
                        headers: {
                            "HOSHINO_T_KK": localStorage.getItem("userToken"),
                        },
                        data: {
                            pull_id: localStorage.getItem('pullId'),
                        }
                    })
                        .then(response => {
                            console.log(response.data);
                            console.log(response.data.data);
                            this.messagelist = response.data.data;
                            // this.sendId = response.data.data.sendId;
                        })
                        .catch(error => {
                            console.error('Error ', error);
                        })
                })
                .catch(error => {
                    console.error('Error ', error);
                })
        },
    },
}

</script>

<style scoped>
.menu-container {
    height: 800px;
    /* 设置固定高度以触发滚动 */
    overflow-y: auto;
}

.el-menu {
    height: 100%;
}

.container {

    position: relative;
    background-color: white;
    height: 100%;
    width: 90%;

}

.chat-window {
    width: 95%;
    height: 100%;
    margin-left: 25px;
    position: relative;

    .top {
        margin-bottom: 10px;

    }
}


.botoom {
    width: 100%;
    height: 85vh;
    background-color: rgb(50, 54, 68);
    border-radius: 20px;
    padding: 20px;
    box-sizing: border-box;
    position: relative;

    .chat-content {
        width: 100%;
        height: 85%;
        overflow-y: scroll;
        padding: 20px;
        box-sizing: border-box;

        &::-webkit-scrollbar {
            width: 0;
            /* Safari,Chrome 隐藏滚动条 */
            height: 0;
            /* Safari,Chrome 隐藏滚动条 */

        }

        .chat-wrapper {
            .chat-friend {
                width: 100%;
                float: left;
                margin-bottom: 20px;
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
                align-items: flex-start;

                .chat-text {
                    max-width: 90%;
                    padding: 20px;
                    border-radius: 20px 20px 20px 5px;
                    background-color: rgb(56, 60, 75);
                    color: #fff;

                    &:hover {
                        background-color: rgb(39, 42, 55);
                    }
                }
            }

            .chat-me {
                width: 100%;
                float: right;
                margin-bottom: 20px;
                position: relative;
                display: flex;
                flex-direction: column;
                justify-content: flex-end;
                align-items: flex-end;

                .chat-text {
                    float: right;
                    max-width: 90%;
                    padding: 20px;
                    border-radius: 20px 20px 5px 20px;
                    background-color: rgb(29, 144, 245);
                    color: #fff;

                    &:hover {
                        background-color: rgb(26, 129, 219);
                    }
                }
            }

        }
    }
}

.chatInputs {
    width: 90%;
    position: absolute;
    bottom: 0;
    margin: 3%;
    display: flex;

    .boxinput {
        color: white;
        text-align: center;
        width: 50px;
        height: 30px;
        background-color: rgb(66, 70, 86);
        border-radius: 15px;
        border: 1px solid rgb(80, 85, 103);
        position: relative;
        cursor: pointer;
    }
}

.inputs {
    width: 90%;
    height: 50px;
    background-color: rgb(66, 70, 86);
    border-radius: 15px;
    border: 2px solid rgb(34, 135, 225);
    padding: 10px;
    box-sizing: border-box;
    transition: 0.2s;
    font-size: 20px;
    color: #fff;
    font-weight: 100;
    margin: 0 20px;

    &:focus {
        outline: none;
    }
}

.send {
    color: white;
    text-align: center;
    width: 50px;
    height: 30px;
    border-radius: 15px;
    position: relative;
    cursor: pointer;
    background-color: rgb(29, 144, 245);
    border: 0;
    transition: 0.3s;
    box-shadow: 0px 0px 5px 0px rgba(0, 136, 255);

    &:hover {
        box-shadow: 0px 0px 10px 0px rgba(0, 136, 255);
    }
}
</style>
